<template>
  <div>
    <div @click="clickHandler" class="clickBtn">
      <!-- 注意:格式化时,:style后一定要使用单引号 -->
      <el-input
        v-model="currentValue"
        readonly
        :style="component.property"
        :disabled="
          (component ? component.disabled : formData[formKey].disabled) ||
          formData[formKey].disabled == true
            ? true
            : false
        "
      >
        <template slot="append">
          <a href="javascript:;" style="font-size: 20px">
            <i class="el-icon-more"></i>
          </a>
        </template>
      </el-input>
    </div>
    <el-dialog
      :title="config.title"
      :visible.sync="show"
      :withHeader="false"
      width="70%"
      class="m-dialog"
    >
      <el-container>
        <el-main v-loading="loading">
          <el-row>
            <el-col>
              <devperson-table
                v-if="!loading"
                v-bind="$attrs"
                v-on="$listeners"
                :config="config"
                @clickcell="clickCellHandler"
                @findlist="load"
                @formSelectChange="formSelectChange"
              ></devperson-table>
              <div class="empty" v-else></div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/style.css";
Vue.use(VXETable);
import devpersonTable from "./devperson-table.vue";
import { mapState } from "vuex";
import OrderService from "@/api/order/OrderService";
export default {
  name: "DevpersonGrid",
  components: {
    devpersonTable,
  },
  props: {
    // ...Input,
    value: {
      type: String,
      default: "",
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    sqlCode: {
      type: String,
      default: "findCust",
    },
    index: {
      type: Number,
    },
    component: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formKey: {
      type: String,
    },
  },
  created() {
    // this.paramCode = this.user.regionCode;
    this.paramCode = "";
    this.tableBase();
  },
  data() {
    return {
      show: false,
      config: {
        //默认值使用空结构,为了代码中不报错
        title: "发展人",
        dataType: "LIST", //LIST:列表，TREE 树
        tableForm: {
          items: [],
          data: {
            name: "",
          },
        },
        tableColumn: [],
        returnColumn: [],
        tableData: [],
        pageInfo: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          rowCount: 0,
        },
      },
      echoKey: "",
      submitKey: "",
      loading: false,
      paramCode: "",
    };
  },
  computed: {
    currentValue: {
      get: function () {
        return this.value;
      },
      set: function (newValue) {
        this.$emit("input", newValue);
      },
    },
    ...mapState("user", ["user"]),
  },
  methods: {
    tableBase() {
      this.config.tableColumn = [
        {
          field: "SALES_CODE",
          slots: null,
          title: "销售员编码",
          treeNode: null,
          width: null,
        },
        {
          field: "STAFF_NAME",
          slots: null,
          title: "销售员姓名 ",
          treeNode: null,
          width: null,
        },
        {
          field: "CERT_TYPE",
          slots: null,
          title: "证件类型",
          treeNode: null,
          width: null,
        },
        {
          field: "CERT_NUMBER",
          slots: null,
          title: "证件号码",
          treeNode: null,
          width: null,
        },
        {
          field: "LINK_TELE_NUMBER",
          slots: null,
          title: "联系手机",
          treeNode: null,
          width: null,
        },
        {
          field: "ORG",
          slots: null,
          title: "组织信息",
          treeNode: null,
          width: null,
        },
        {
          field: "STATUS_CD",
          slots: null,
          title: "状态",
          treeNode: null,
          width: null,
        },
        {
          field: "STATUS_DATE",
          slots: null,
          title: "状态时间",
          treeNode: null,
          width: null,
        },
      ];
      this.config.tableForm = {
        data: {
          CHANNEL_NBR: "",
          OPERATORS_NBR: "",
          province: "",
          localNet: "",
          SALES_CODE: "",
          STAFF_NAME: "",
        },
        items: [
          {
            field: "CHANNEL_NBR",
            title: "渠道名称",
            itemRender: { name: "$select", options: [] },
          },
          {
            field: "OPERATORS_NBR",
            title: "经营主体名称",
            itemRender: { name: "$select", options: [] },
          },
          {
            field: "province",
            title: "省份",
            itemRender: { name: "$select", options: [] },
          },
          {
            field: "localNet",
            title: "本地网",
            itemRender: { name: "$select", options: [] },
          },
          {
            field: "SALES_CODE",
            title: "销售员编码",
            itemRender: {
              name: "$input",
              props: { placeholder: "请输入销售员编码" },
            },
          },
          {
            field: "STAFF_NAME",
            title: "销售员姓名",
            itemRender: {
              name: "$input",
              props: { placeholder: "请输入销售员姓名" },
            },
          },
        ],
      };
      // 反选数据
      this.submitKey = this.config.tableColumn[0].field;
      this.echoKey = this.config.tableColumn[1].field;
    },
    async load(filerData = {}, page) {
      if (page) {
        this.config.pageInfo.currentPage = Number(page);
      }
      //如果传回的本地网存在就传本地网，否则传省份，都不存在就传//空
      if (filerData.localNet) {
        this.paramCode = filerData.localNet;
      } else if (filerData.province) {
        this.paramCode = filerData.province;
      }
      this.loading = true;
      const params = {
        REGION_CODE: this.paramCode,
        curPage: this.config.pageInfo.currentPage,
        size: this.config.pageInfo.pageSize,
        ...filerData,
      };
      let res = await OrderService.devpersonList(params);
      if (res.code == 200) {
        const { meta } = res;
        this.config.tableData =
          meta.returnJson instanceof Array ? meta.returnJson : [];
        this.config.pageInfo.total = Number(meta.totalCnt) || 0;
        //转换状态数值
        if (this.config.tableData.length > 0) {
          this.config.tableData.forEach((item) => {
            item.STATUS_CD = item.STATUS_CD == 1000 ? "有效" : "无效";
          });
        }
      } else {
        
      }
      this.loading = false;
    },

    async clickHandler() {
      console.log(this.component)
      debugger
      if (
        this.component.disabled ||
        this.formData[this.formKey].disabled == true
      )
        return;
      this.show = true;
      this.tableBase();
      await this.load();
      this.getOptions();
      this.getProvince();
    },

    clickCellHandler(row) {
      this.show = false;
      this.$emit("input", row[this.echoKey], {
        index: this.index,
        echoKey: row[this.echoKey],
        submitKey: row[this.submitKey],
      });
      this.$emit("getrow", row, this.index);
    },
    // form表单中select切换
    formSelectChange(data, field) {
      if (field == "province") {
        this.getLocalNet(data.value);
      }
    },

    async getOptions() {
      const params = { REGION_CODE: this.user.regionCode };
      let res = await OrderService.devpersonFilterChannel(params);
      if (res.code == 200) {
        const { meta } = res;
        this.config.tableForm.items[0].itemRender.options = meta.channelNbr.map(
          (item) => {
            return { value: item.CODE, label: item.NAME };
          }
        );
        this.config.tableForm.items[1].itemRender.options = meta.operNbr.map(
          (item) => {
            return { value: item.CODE, label: item.NAME };
          }
        );
      } else {
        this.$message.error("获取渠道和经营主体列表接口异常");
      }
    },
    //省份接口
    async getProvince() {
      const params = {
        interFaceType: "ORDER",
        sqlId: 2021071403,
        paramStr: `regionCode:${this.user.regionCode}`,
      };
      let res = await OrderService.devpersonFilterProvince(params);
      if (res.code == 200) {
        const {
          meta: { resCode, resList },
        } = res;
        if (resCode == "0") {
          this.config.tableForm.items[2].itemRender.options =
            resList.executeSqlResps.map((item) => {
              return { label: item.text, value: item.value };
            });
        }
      } else {
        this.$message.error("获取省份接口异常");
      }
    },
    //本地网
    async getLocalNet(provinceCode) {
      const params = {
        interFaceType: "ORDER",
        sqlId: 2021071404,
        paramStr: `regionCode:${provinceCode}`,
      };
      let res = await OrderService.devpersonFilterProvince(params);
      if (res.code == 200) {
        const {
          meta: { resCode, resList },
        } = res;
        if (resCode == "0") {
          this.config.tableForm.items[3].itemRender.options =
            resList.executeSqlResps.map((item) => {
              return { label: item.text, value: item.value };
            });
        }
      } else {
        this.$message.error("获取本地网接口异常");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.clickBtn {
  ::v-deep .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    cursor: pointer;
  }
}
.empty {
  width: 100%;
  height: 40px;
}
</style>
